<template>
  <div>
    <div class="header">
      <div class="tool">
        <a-space size="large">
          <a-input-search
            :style="{ width: '320px' }"
            placeholder="搜索员工名字/工号"
          />
        </a-space>
      </div>
      <div>
        <a-space size="medium">
          <a-button type="outline" @click="goInternshipTemplateAuditDetail()">
            <template #icon>
              <icon-plus />
            </template>
            <template #default>新增模板</template>
          </a-button>
        </a-space>
      </div>
    </div>

    <div class="main">
      <TableTurn
        :tableData="getData"
        :args="args"
        ref="tableRef"
        :isShowPagination="false"
      >
        <a-table-column :width="60" title="序号">
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>
        <a-table-column dataIndex="name" title="姓名"></a-table-column>
        <a-table-column dataIndex="explain" title="描述"></a-table-column>
        <a-table-column dataIndex="flowId" title="flowId"></a-table-column>
        <a-table-column :width="200" dataIndex="state" title="启用状态">
          <template #cell="{ record }">
            {{ record.state === 1 ? '启用' : '禁用' }}
          </template>
        </a-table-column>
        <a-table-column title="设为默认">
          <template #cell="{ record }">
            <a-switch
              v-model="record.state"
              :checked-value="1"
              :unchecked-value="2"
              @change="changeStatus(record)"
            />
          </template>
        </a-table-column>
        <a-table-column :width="200" dataIndex="workPlace" title="操作">
          <template #cell="{ record }">
            <a-space :size="0">
              <a-tooltip content="详情">
                <icon-font
                  type="icon-details-def"
                  :size="26"
                  :style="{
                    cursor: 'pointer'
                  }"
                />
              </a-tooltip>
              <a-tooltip content="编辑">
                <icon-font
                  type="icon-edit"
                  :size="26"
                  :style="{
                    cursor: 'pointer'
                  }"
                  @click="edit(record)"
                />
              </a-tooltip>
              <a-tooltip content="删除" position="left">
                <a-popconfirm
                  content="是否确认删除该条数据?"
                  @ok="del(record.id)"
                >
                  <icon-font
                    type="icon-delete"
                    :size="26"
                    :style="{
                      cursor: 'pointer'
                    }"
                  />
                </a-popconfirm>
              </a-tooltip>
            </a-space>
          </template>
        </a-table-column>
      </TableTurn>
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  GetInternshipProofModeAuditList,
  PutInternshipProofModeAudit,
  DelInternshipProofModeAuditById
} from '@/apis/human/base/variationManager/index';
import { type TInternshipTemplateAudit } from '@/apis/human/base/variationManager/type';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
// 选择器配置
const args = reactive({
  rowSelection: {
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false
  }
});
const tableRef = ref();
const refresh = () => {
  tableRef.value.getData();
};
const getData = async (page: any) => {
  try {
    const res = await GetInternshipProofModeAuditList();
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};
//修改状态
const changeStatus = async (item: TInternshipTemplateAudit) => {
  item.status = item.state;
  item.state = void 0;
  await PutInternshipProofModeAudit(item);
  refresh();
};
//去新增模板
const goInternshipTemplateAuditDetail = (data?: TInternshipTemplateAudit) => {
  let id = data && data.id! > 0 ? data.id : void 0;
  router.push({
    name: 'InternshipTemplateAuditDetail',
    query: { id }
  });
};
//编辑
const edit = (data: TInternshipTemplateAudit) => {
  goInternshipTemplateAuditDetail({ id: data.id });
};
//删除
const del = async (id: number) => {
  if (!id) return;
  await { id };
  refresh();
};
</script>
<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}
</style>
